<template>
    <div class="add">
        <div class="head">
            <div class="left">
                <span>首页</span>
                <span>社区</span>
            </div>
            <div class="right">
                <img src="../../src/images/购物车.png" alt="">
                <img src="../../src/images/个人中心.png" alt="">
            </div>
        </div>
        <div class="jingxuan">
            <span>小编精选</span>
        </div>
        <div class="banner">
            <img src="../images/banner.jpg" alt="">
        </div>
        <div class="yanghuo">
            <span>洋货集</span>
        </div>
        <div class="yanghuoji">
            <ul>
                <li>

                    <img src="../images/包包.png" alt="">
                    <span>箱包潮鞋</span>
                </li>
                <li>
                    <img src="../images/服装.png" alt="">
                    <span>服装配饰</span>
                </li>
                <li>
                    <img src="../images/护肤.png" alt="">
                    <span>美颜护肤</span>
                </li>
                <li>
                    <img src="../images/生活.png" alt="">
                    <span>生活家</span>
                </li>
            </ul>
        </div>
        <div class="xihuan">
            <span>猜你喜欢</span>
        </div>
        <div class="gouwu">
            <ul>
                <li>
                    <img src="../images/3.jpg" alt="">
                    <span>
                        泰国INWNA樱幻玫瑰护发精油
                        30粒/盒免洗护发烫染改善...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/4.jpg" alt="">
                    <span>
                        [2盒]纽西之谜免洗理眼面
                        腆补水保湿提控紧致夜间...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/5.jpg" alt="">
                    <span>
                        送刷纽西之谜清洁面膜深居.
                        清洁毛孔去黑头涂抹式新... .
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/6.jpg" alt="">
                    <span>
                        Amortals尔木萄唇独水光镜面
                        学生款平价丝城雾面口红...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/7.jpg" alt="">
                    <span>
                        德国贺本清Herbacin洋甘菊
                        鹰實4.8g小甘菊护于霜75ml
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/8.jpg" alt="">
                    <span>
                        荣磊辜洛哥护发精油女防毛
                        躁柔顺免洗发膜香味持久...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/9.jpg" alt="">
                    <span>
                        泰国正品at生姜洗发水Atreus
                        护发无硅油控油止痒防脱... .
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/10.jpg" alt="">
                    <span>
                        纽西之谜免洗睡眠面膜补水
                        保湿提控紧致夜间修护提...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/11.jpg" alt="">
                    <span>
                        Lv路易式量22平李新虹easy
                        pouch on strap牛反最下包...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/13.jpg" alt="">
                    <span>
                        YSU圣罗兰女士金属logo黑
                        色粒面压纹皮革信封包单...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>

                <li>
                    <img src="../images/3.jpg" alt="">
                    <span>
                        泰国INWNA樱幻玫瑰护发精油
                        30粒/盒免洗护发烫染改善...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/4.jpg" alt="">
                    <span>
                        [2盒]纽西之谜免洗理眼面
                        腆补水保湿提控紧致夜间...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/5.jpg" alt="">
                    <span>
                        送刷纽西之谜清洁面膜深居.
                        清洁毛孔去黑头涂抹式新... .
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/6.jpg" alt="">
                    <span>
                        Amortals尔木萄唇独水光镜面
                        学生款平价丝城雾面口红...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/7.jpg" alt="">
                    <span>
                        德国贺本清Herbacin洋甘菊
                        鹰實4.8g小甘菊护于霜75ml
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/8.jpg" alt="">
                    <span>
                        荣磊辜洛哥护发精油女防毛
                        躁柔顺免洗发膜香味持久...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/9.jpg" alt="">
                    <span>
                        泰国正品at生姜洗发水Atreus
                        护发无硅油控油止痒防脱... .
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/10.jpg" alt="">
                    <span>
                        纽西之谜免洗睡眠面膜补水
                        保湿提控紧致夜间修护提...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/11.jpg" alt="">
                    <span>
                        Lv路易式量22平李新虹easy
                        pouch on strap牛反最下包...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>
                <li>
                    <img src="../images/13.jpg" alt="">
                    <span>
                        YSU圣罗兰女士金属logo黑
                        色粒面压纹皮革信封包单...
                    </span>
                    <div class="you">
                        包邮管退
                    </div>
                    <div class="bottom">
                        <div class="left">
                            ￥ 48.80
                        </div>
                        <div class="right">
                            中国
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.head {
    width: 100vw;
    height: 70px;
    // background-color: aquamarine;
    background-color: #FFFFFF;
    position: fixed;
    top: 0;
    left: 0;

    .left {
        width: 100px;
        height: 70px;
        //background-color: blueviolet;
        position: fixed;
        left: 0;
        line-height: 70px;
        font-size: 18px;
        padding-left: 5px;

        span {
            margin-left: 8px;
        }
    }

    .right {
        width: 100px;
        height: 70px;
        //background-color: rgb(204, 188, 220);
        position: fixed;
        right: 0;
        line-height: 90px;

        img {
            margin-left: 15px;
            width: 30px;
            height: 30px;
            background-size: 100% 100%;
        }
    }
}

.jingxuan {
    margin-top: 70px;
    width: 100vw;
    height: 90px;
    //background-color: cadetblue;
    background-color: #F5F5F5;
    line-height: 90px;
    text-align: center;
}

.banner {
    //width: 100vw;;
    width: 100vw;
    height: 300px;
    background-color: greenyellow;

    img {
        width: 100vw;
        height: 300px;
        background-size: 100% 100%;
    }
}

.yanghuo {
    width: 100vw;
    height: 90px;
    //background-color: cadetblue;
    background-color: #F5F5F5;
    line-height: 90px;
    text-align: center;
}

.yanghuoji {
    width: 100vw;
    height: 100%;
    //background-color: darkred;
    background-color: #FFFFFF;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

        li {
            width: 45vw;
            height: 120px;
            //background-color: white;
            background-color: #F7F7F5;
            margin: 5px;
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                //width: 45vw;
                width: 60px;
                height: 80px;
                //height: 120px;
                background-size: 100% 100%;
            }

            span {
                line-height: 80px;
                font-size: 20px;
            }
        }
    }
}

.xihuan {
    width: 100vw;
    height: 90px;
    //background-color: cadetblue;
    background-color: #F5F5F5;
    line-height: 90px;
    text-align: center;
}

.gouwu {
    width: 100vw;
    height: 100%;
    //background-color: lawngreen;
    background-color: #F5F5F5;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        height: 100%;

        li {
            width: 160px;
            height: 250px;
            //background-color: blueviolet;
            background-color: #FFFFFF;
            margin: 10px;
            height: 100%;

            img {
                width: 160px;
                height: 150px;
                background-size: 100% 100%;
            }

            span {
                font-size: 15px;
            }

            .you {
                font-size: 10px;
                border-radius: 10px;
                //border-color: darkred;
                width: 70px;
                height: 30px;
                //background-color: aquamarine;
                background-color: #FFFFFF;
                line-height: 30px;
                text-align: center;
                border: 2px solid #F0C1C1;
            }

            .bottom {
                position: relative;

                .left {
                    font-size: 23px;
                    color: #CF3333;
                }

                .right {
                    position: absolute;
                    right: 5px;
                    bottom: 5px;
                    font-size: 7px;
                }
            }
        }
    }
}
</style>